<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title> 基础1 基本的3d图形绘制 </title>
    <style>
         body {
                margin: 0;
                overflow: hidden;
                /* 隐藏body窗口区域滚动条 */
         }
    </style>
</head>
<body>
    
</body>
</html>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script> -->
<script src="./1.js"></script>
<script>
// 创建场景对象Scene
    var scene = new THREE.Scene();
    // 创建网格模型                                             //z y x
    // var geometry = new THREE.SphereGeometry(60, 40, 40);    //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(300, 100, 20);        //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({             //即场景 颜色 
      color: 0xcc
    });          //材质对象Material
    var mesh = new THREE.Mesh(geometry, material);             //网格模型对象Mesh
    scene.add(mesh);                                           //网格模型添加到场景中
    //光源设置
    //点光源
    var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300);                     //点光源位置
    scene.add(point);                                          //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)


//相机设置
    var width = window.innerWidth;                              //窗口宽度
    var height = window.innerHeight;                            //窗口高度
    var k = width / height;                                     //窗口宽高比
    var s = 200;                                                //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);   //这里走一个算法儿 
    camera.position.set(200, 300, 200);                         //设置相机位置   z y x 
    camera.lookAt(scene.position);                              //设置相机方向(指向的场景对象)
   

//创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);                            //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1);                        //设置背景颜色
    document.body.appendChild(renderer.domElement);             //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);                             //传入场景对象和照相机 render(scene场景,camera照相机)方法去解析两个传入的参数实例 绘制函数 



</script>